import React from 'react'

import HomeStore from '../../stores/HomeStory'

import { inject, observer } from 'mobx-react'

import CRUDPage from '../../components/crud/CRUDPage'

import { Button, Modal, Space, Image, Tooltip } from 'antd'
import '../../config/dark-theme.less'
interface OrdersManagerProps {
  HomeStore: HomeStore
}

const OrdersManager: React.FC<OrdersManagerProps> = ({}) => {
  const showGoodsDetail = (recode: any) => {
    Modal.info({
      title: (
        <div
          style={{
            textAlign: 'center',
            maxWidth: '200px',
            overflow: 'hidden',
            textOverflow: 'ellipsis',
            whiteSpace: 'nowrap',
          }}
        >
          <Tooltip title={recode.name}>
            <b>{recode.name}</b>
          </Tooltip>{' '}
          <b style={{ color: 'red' }}>¥{recode.price}</b>
        </div>
      ),
      content: (
        <Space size={2} direction='vertical'>
          <Image
            width={200}
            height={272}
            src={recode.cover}
            placeholder={
              <Image preview={false} src={recode.cover} width={200} />
            }
          />
          <div
            style={{
              textAlign: 'center',
              maxWidth: '200px',
              height: '64px',
              overflow: 'hidden',
              textOverflow: 'ellipsis',
              whiteSpace: 'nowrap',
            }}
          >
            <Tooltip title={recode.remark}>
              <p>{recode.remark}</p>
            </Tooltip>
          </div>
        </Space>
      ),
      onOk() {},
    })
  }
  const columns = [
    {
      title: '商品详情',
      dataIndex: 'goods_detial',
      width: 80,
      render: (text: string, recode: any) => {
        return (
          <Button
            type='link'
            onClick={() => showGoodsDetail(recode.goods)}
            size='small'
          >
            查看商品详情
          </Button>
        )
      },
    },
  ]
  return (
    <>
      <CRUDPage
        addUrl='/order/add'
        queryUrl='/order/list'
        deleteUrl='/order/delete'
        updateUrl='/order/update'
        childColumns={columns}
        operate='order'
      />
    </>
  )
}

export default inject('HomeStore')(observer(OrdersManager))
